<template>
  <div class="out-container">
    <p class="cart-title ml-90 pt-40">购物车</p>
    <div class="order-container">
      <div class="Shopping-cart-area mt-40">
        <div class="container">
          <div class="row">
            <div class="col-12">

              <div class="table-content table-responsive">
                <el-table
                  id="cart-table"
                  class="table "
                  ref="filterTable"
                  :data="shoppingCart.itemList"
                  style="width: 100%">
                  <el-table-column
                    prop="img"
                    label="商品"
                    width="160"
                  >
                    <template slot-scope="scope">
                      <img style="width:180px;height:120px;object-fit:cover;" :src="scope.row.img">
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="title"
                    label=""
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="description"
                    label="描述">
                  </el-table-column>
                  <el-table-column
                    prop="price"
                    label="价格"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="count"
                    label="数量"
                    width="160">
                    <template slot-scope="scope">
                      <el-input-number v-model="scope.row.count" size="mini" :min="1" label=""
                                       style="width:70%"></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="action"
                    label="删除"
                    width="120">
                    <template slot-scope="scope">
                      <div class="delete-wrapper">
                        <i class="el-icon-delete" @click="1"></i>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="row">
                <div class="col-12">
                  <div class="coupon-all">
                    <div class="coupon">
                      <el-select v-model="discount" clearable placeholder="请选择优惠券">
                        <el-option
                          v-for="item in couponList"
                          :key="item.discount"
                          :label="item.title"
                          :value="item.discount">
                        </el-option>
                      </el-select>
                      <input class="button apply_coupon ml-20" name="apply_coupon" value="确定"
                             type="submit">
                    </div>
                  </div>
                </div>
              </div>
              <div class="row-total">
                <div class="cart-page-total">
                  <ul>
                    <li>优惠券抵扣 <span>￥{{ discount }}</span></li>
                    <li>券后价格 <span>￥?</span></li>
                  </ul>
                  <div class="buy-button-wrapper mt-30 mr-40">
                    <router-link to="/pay">
                      <input class="button buy-button" name="buy" value="支付"
                             type="submit">
                    </router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import GoodsListNav from '@/components/nav/GoodsListNav';
import store from '@/vuex/store';
import {mapState, mapActions} from 'vuex';

export default {
  name: 'ShoppingCart',
  data () {
    return {
      discount: null
    };
  },
  beforeRouteEnter (to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  mounted () {
  },
  created () {
    this.loadShoppingCart();
    this.loadCoupon();
  },
  computed: {
    ...mapState(['shoppingCart', 'couponList'])
  },
  methods: {
    ...mapActions(['loadShoppingCart', 'loadCoupon'])
  },
  components: {
    GoodsListNav
  },
  store
};
</script>

<style scoped>
.hidden {
  color: #ffffff;
}

.cart-title {
  color: rgb(244, 207, 47);
  font-family: "黑体";
  font-weight: bold;
  font-size: 30px;
}

.out-container {
  background-color: rgb(255, 255, 255);
  background-image: url("/static/img/index/background.png");
  background-repeat: repeat;
}

/deep/ .el-table tbody tr { pointer-events:none; }

/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell {
  background-color: transparent;
}

/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}

/deep/ .el-input-number .is-without-controls .el-input__inner {
  width: 100px;
  line-height: 30px;
  height: 28px;
}

/* 删除表格下最底层的横线 */
/deep/ .el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

/* 表格表头字体颜色 */
/deep/ .el-table thead {
  color: #f4cf2f;
  font-family: "微软雅黑 Light";
  font-size: 18px;
}

.delete-wrapper {
  cursor: pointer;
  font-size: 30px;
  color: #e0b80b;
}

.order-container {
  width: 1020px;
  margin: 0px auto;
  margin-top: 30px;
}

/****************************加入购物车页面开始*****************************/

.coupon-all {
  margin-top: 50px;
}

.coupon {
  float: left;
}

input {
  background-color: transparent;
  border: 1px solid #ddd;
  color: #f5cb1a;
  font-size: 13px;
  border-radius: 0;
  height: 42px;
  width: 120px;
}

.button {
  background-color: #f5cb1a;
  border: 0 none;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  font-family: "微软雅黑 Light";
  cursor: pointer;
  height: 42px;
  letter-spacing: 1px;
  line-height: 42px;
  padding: 0 25px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  width: 110px;
}

.button:hover {
  background: #f7d751;
}

.buy-button-wrapper {
  float: right;
}

.coupon2 {
  float: right;
}

.row-total {
  height: 400px;
}

.cart-page-total {
  width: 300px;
  float: right;
}

.cart-page-total > ul > li {
  list-style: none;
  font-size: 18px;
  color: #252525;
  padding: 10px 30px;
  border-bottom: 1px solid #ebebeb;
  font-weight: 700;
  font-family: 黑体;
}

.cart-page-total ul > li > span {
  float: right;
}

.cart-page-total li:last-child {
  border-bottom: 0;
}

.cart-page-total > a {
  background-color: #f5cb1a;
  border: 1px solid #f5cb1a;
  color: #fff;
  display: inline-block;
  margin-top: 30px;
  padding: 10px 20px;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.cart-page-total > a:hover {
  background: #f7d751;
  border-color: #f7d751;
}

/****************************加入购物车页面结束*****************************/
input {
  background: transparent;
  border: 2px solid #f7d751;
  height: 56px;
  box-shadow: none;
  padding-left: 10px;
  font-size: 14px;
  color: #a4a4a4;
  width: 100%;
  box-shadow: none;
  border-radius: 0;
}

select {
  width: 100%;
  background: #eceff8;
  border: 2px solid #eceff8;
  height: 45px;
  padding-left: 10px;
  box-shadow: none;
  font-size: 14px;
  color: #f5cb1a;
}

option {
  background: #fff;
  border: 0px solid #f5cb1a;
  padding-left: 10px;
  font-size: 14px;
}

input:focus {
  background: transparent;
  border: 2px solid #f7d751;
}

textarea {
  resize: vertical;
  background: #eceff8;
  border: 2px solid #eceff8;
  padding: 10px;
  width: 100%;
  font-size: 14px;
}

textarea:focus {
  background: transparent;
  border: 2px solid #f7d751;
  outline: none;
}

::-moz-placeholder {
  color: #444;
  font-size: 13px;
}

/*************************
  Basic margin padding
*************************/
.m-0 {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

.p-0 {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/*************************
         Margin top
*************************/
.mt-0 {
  margin-top: 0
}

.mt-10 {
  margin-top: 10px
}

.mt-15 {
  margin-top: 15px
}

.mt-20 {
  margin-top: 20px
}

.mt-30 {
  margin-top: 30px
}

.mt-40 {
  margin-top: 40px
}

.mt-45 {
  margin-top: 45px
}

.mt-50 {
  margin-top: 50px
}

.mt-55 {
  margin-top: 55px
}

.mt-60 {
  margin-top: 60px
}

.mt-70 {
  margin-top: 70px
}

.mt-75 {
  margin-top: 75px
}

.mt-80 {
  margin-top: 80px
}

.mt-90 {
  margin-top: 90px
}

.mt-100 {
  margin-top: 100px
}

.mt-110 {
  margin-top: 110px
}

.mt-120 {
  margin-top: 120px
}

.mt-130 {
  margin-top: 130px
}

.mt-140 {
  margin-top: 140px
}

.mt-150 {
  margin-top: 150px
}

/*************************
      Margin right
*************************/
.mr-0 {
  margin-right: 0px
}

.mr-10 {
  margin-right: 10px
}

.mr-15 {
  margin-right: 15px
}

.mr-20 {
  margin-right: 20px
}

.mr-30 {
  margin-right: 30px
}

.mr-40 {
  margin-right: 40px
}

.mr-50 {
  margin-right: 50px
}

.mr-60 {
  margin-right: 60px
}

.mr-70 {
  margin-right: 70px
}

.mr-80 {
  margin-right: 80px
}

.mr-90 {
  margin-right: 90px
}

.mr-100 {
  margin-right: 100px
}

.mr-110 {
  margin-right: 110px
}

.mr-120 {
  margin-right: 120px
}

.mr-130 {
  margin-right: 130px
}

.mr-140 {
  margin-right: 140px
}

.mr-150 {
  margin-right: 150px
}

/*************************
      Margin bottom
*************************/
.mb-0 {
  margin-bottom: 0
}

.mb-10 {
  margin-bottom: 10px
}

.mb-15 {
  margin-bottom: 15px
}

.mb-20 {
  margin-bottom: 20px
}

.mb-30 {
  margin-bottom: 30px
}

.mb-40 {
  margin-bottom: 40px
}

.mb-50 {
  margin-bottom: 50px
}

.mb-60 {
  margin-bottom: 60px
}

.mb-70 {
  margin-bottom: 70px
}

.mb-75 {
  margin-bottom: 75px
}

.mb-80 {
  margin-bottom: 80px
}

.mb-90 {
  margin-bottom: 90px
}

.mb-100 {
  margin-bottom: 100px
}

.mb-110 {
  margin-bottom: 110px
}

.mb-120 {
  margin-bottom: 120px
}

.mb-130 {
  margin-bottom: 130px
}

.mb-140 {
  margin-bottom: 140px
}

.mb-150 {
  margin-bottom: 150px
}

/*************************
        Margin left
*************************/
.ml-0 {
  margin-left: 0
}

.ml-10 {
  margin-left: 10px
}

.ml-15 {
  margin-left: 15px
}

.ml-20 {
  margin-left: 20px
}

.ml-30 {
  margin-left: 30px
}

.ml-40 {
  margin-left: 40px
}

.ml-50 {
  margin-left: 50px
}

.ml-60 {
  margin-left: 60px
}

.ml-70 {
  margin-left: 70px
}

.ml-80 {
  margin-left: 80px
}

.ml-90 {
  margin-left: 90px
}

.ml-100 {
  margin-left: 100px
}

.ml-110 {
  margin-left: 110px
}

.ml-120 {
  margin-left: 120px
}

.ml-130 {
  margin-left: 130px
}

.ml-140 {
  margin-left: 140px
}

.ml-150 {
  margin-left: 150px
}

/*************************
        Padding top
*************************/
.pt-0 {
  padding-top: 0
}

.pt-10 {
  padding-top: 10px
}

.pt-15 {
  padding-top: 15px
}

.pt-20 {
  padding-top: 20px
}

.pt-30 {
  padding-top: 30px
}

.pt-35 {
  padding-top: 35px
}

.pt-40 {
  padding-top: 40px
}

.pt-50 {
  padding-top: 50px
}

.pt-60 {
  padding-top: 60px
}

.pt-65 {
  padding-top: 65px
}

.pt-70 {
  padding-top: 70px
}

.pt-80 {
  padding-top: 80px
}

.pt-90 {
  padding-top: 90px
}

.pt-100 {
  padding-top: 100px
}

.pt-110 {
  padding-top: 110px
}

.pt-120 {
  padding-top: 120px
}

.pt-130 {
  padding-top: 130px
}

.pt-140 {
  padding-top: 140px
}

.pt-150 {
  padding-top: 150px
}

/*************************
        Padding right
*************************/
.pr-0 {
  padding-right: 0
}

.pr-10 {
  padding-right: 10px
}

.pr-15 {
  padding-right: 15px
}

.pr-20 {
  padding-right: 20px
}

.pr-30 {
  padding-right: 30px
}

.pr-40 {
  padding-right: 40px
}

.pr-50 {
  padding-right: 50px
}

.pr-60 {
  padding-right: 60px
}

.pr-70 {
  padding-right: 70px
}

.pr-80 {
  padding-right: 80px
}

.pr-90 {
  padding-right: 90px
}

.pr-100 {
  padding-right: 100px
}

.pr-110 {
  padding-right: 110px
}

.pr-120 {
  padding-right: 120px
}

.pr-130 {
  padding-right: 130px
}

.pr-140 {
  padding-right: 140px
}

/*************************
        Padding bottom
*************************/
.pb-0 {
  padding-bottom: 0
}

.pb-5 {
  padding-bottom: 5px !important
}

.pb-10 {
  padding-bottom: 10px
}

.pb-15 {
  padding-bottom: 15px
}

.pb-20 {
  padding-bottom: 20px
}

.pb-30 {
  padding-bottom: 30px
}

.pb-35 {
  padding-bottom: 35px
}

.pb-40 {
  padding-bottom: 40px
}

.pb-45 {
  padding-bottom: 45px
}

.pb-50 {
  padding-bottom: 50px
}

.pb-60 {
  padding-bottom: 60px
}

.pb-65 {
  padding-bottom: 65px
}

.pb-70 {
  padding-bottom: 70px
}

.pb-80 {
  padding-bottom: 80px
}

.pb-90 {
  padding-bottom: 90px
}

.pb-100 {
  padding-bottom: 100px
}

.pb-110 {
  padding-bottom: 110px
}

.pb-120 {
  padding-bottom: 120px
}

.pb-130 {
  padding-bottom: 130px
}

.pb-140 {
  padding-bottom: 140px
}

.pb-150 {
  padding-bottom: 150px
}

/*************************
        Padding left
*************************/
.pl-0 {
  padding-left: 0
}

.pl-10 {
  padding-left: 10px
}

.pl-15 {
  padding-left: 15px
}

.pl-20 {
  padding-left: 20px
}

.pl-30 {
  padding-left: 30px
}

.pl-40 {
  padding-left: 40px
}

.pl-50 {
  padding-left: 50px
}

.pl-60 {
  padding-left: 60px
}

.pl-70 {
  padding-left: 70px
}

.pl-80 {
  padding-left: 80px
}

.pl-90 {
  padding-left: 90px
}

.pl-100 {
  padding-left: 100px
}

.pl-110 {
  padding-left: 110px
}

.pl-120 {
  padding-left: 120px
}

.pl-130 {
  padding-left: 130px
}

.pl-140 {
  padding-left: 140px
}

.pl-150 {
  padding-left: 150px
}

/***************************
    Page section padding
****************************/
.ptb-0 {
  padding: 0
}

.ptb-10 {
  padding: 10px 0
}

.ptb-20 {
  padding: 20px 0
}

.ptb-30 {
  padding: 30px 0
}

.ptb-40 {
  padding: 40px 0
}

.ptb-50 {
  padding: 50px 0
}

.ptb-60 {
  padding: 60px 0
}

.ptb-70 {
  padding: 70px 0
}

.ptb-80 {
  padding: 80px 0
}

.ptb-90 {
  padding: 90px 0
}

.ptb-100 {
  padding: 100px 0
}

.ptb-110 {
  padding: 110px 0
}

.ptb-120 {
  padding: 120px 0
}

.ptb-130 {
  padding: 130px 0
}

.ptb-140 {
  padding: 140px 0
}

.ptb-150 {
  padding: 150px 0
}

/***************************
    Page section margin
****************************/
.mtb-0 {
  margin: 0
}

.mtb-10 {
  margin: 10px 0
}

.mtb-15 {
  margin: 15px 0
}

.mtb-20 {
  margin: 20px 0
}

.mtb-30 {
  margin: 30px 0
}

.mtb-40 {
  margin: 40px 0
}

.mtb-50 {
  margin: 50px 0
}

.mtb-60 {
  margin: 60px 0
}

.mtb-70 {
  margin: 70px 0
}

.mtb-80 {
  margin: 80px 0
}

.mtb-90 {
  margin: 90px 0
}

.mtb-100 {
  margin: 100px 0
}

.mtb-110 {
  margin: 110px 0
}

.mtb-120 {
  margin: 120px 0
}

.mtb-130 {
  margin: 130px 0
}

.mtb-140 {
  margin: 140px 0
}

.mtb-150 {
  margin: 150px 0;
}

</style>
